<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-header>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-main class="font1" style="font-size:30px">{{ businessArr.length }}</el-main>
            <el-main class="font">商家总数</el-main>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-main class="font1" style="font-size:30px">{{goodsArr.length}}</el-main>
            <el-main class="font">商品数量</el-main>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-main class="font1" style="font-size:30px">{{ AdminCount }}</el-main>
            <el-main class="font">管理员数量</el-main>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-main class="font1" style="font-size:30px">{{ userCount }}</el-main>
            <el-main class="font">用户数量</el-main>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-card class="box-card">
      <div class="text item">
        公告信息
      </div>
      <el-carousel indicator-position="none" class="b1" height="150px">
        <el-carousel-item v-for="(item,index) in NoticeArr" :key="index">
          <h3>{{ item.notice }}</h3>
        </el-carousel-item>
      </el-carousel>
    </el-card>
    <el-card class="box-card">
      <div class="text item">
        帮助信息
      </div>
      <el-carousel indicator-position="none" height="170px">
        <el-carousel-item v-for="(item,index) in helpArr" :key="index">
          <h3> {{ item.helpInformation }}</h3>
        </el-carousel-item>
      </el-carousel>
    </el-card>
  </el-card>

</template>
<script>

export default {
  created() {
    this.listUser();
    this.listAdmin();
    this.listNotice();
    this.listHelp();
    this.listBusiness();
    this.listGoods();
  }, data() {
    return {
      AdminCount: 0,
      userCount: 0,
      NoticeArr: [],
      helpArr: [],
      businessArr: [],
      goodsArr: []
    }
  },
  methods: {
    listAdmin() {
      this.$http.get('/sys/user/listAll', {
        // 解构赋值
      }).then(({data: res}) => {
        // console.log(res)
        this.AdminCount = res.data.length;
      }).catch(() => {
        // console.log(params)
      })
    },
    listUser() {
      this.$http.get('demo/users/listAll', {
        // 解构赋值
      }).then(({data: res}) => {
        this.userCount = res.data.length
      }).catch(() => {

      })
    },
    listNotice() {
      this.$http.get('notice/notice/listAll', {
        // 解构赋值
      }).then(({data: res}) => {
        this.NoticeArr = res.data
      }).catch(() => {

      })
    },
    listHelp() {
      this.$http.get('helpinformation/helpinformation/listAll', {
        // 解构赋值
      }).then(({data: res}) => {
        this.helpArr = res.data
      }).catch(() => {

      })

    },
    listBusiness() {
      this.$http.get('business/business/getList', {
        // 解构赋值
      }).then(({data: res}) => {
        this.businessArr = res.data
      }).catch(() => {

      })
    }, listGoods() {
      this.$http.get('goobs/goods/listAll', {
        // 解构赋值
      }).then(({data: res}) => {
        this.goodsArr = res.data
      }).catch(() => {

      })
    }
  }
}
</script>
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.font1 {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  text-align: center;
  font-weight: bolder;
  color: #58697d;
  margin-top: 20px;
}

.font {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  text-align: center;
  font-weight: bolder;
  margin-top: -30px;
  color: #58697d;
}

.text {
  font-size: 19px;

}

.item {
  padding: 18px 0;
  font-style: italic;
  color: #3a8ee6;
}

.box-card {
  width: 100%;
  height: 270px;
  margin-right: 20px;
  margin-top: 100px;
}

.bg-purple {
  background: #d3dce6;
}
</style>
